<template>
  <div>
    <van-nav-bar
        title="中国人民公安大学图书馆选座"/>
    <van-cell-group title="举报不良行为">
      <van-form @submit="onSubmit">
        <van-field
            readonly
            clickable
            label="位置"
            placeholder="选择位置"
            @click="showPicker = true"
            :value="position"
        />
        <van-popup v-model="showPicker" round position="bottom">
          <van-picker
              show-toolbar
              :columns="columns"
              @cancel="showPicker = false"
              @confirm="onPositionConfirm"
              :rules="[{ required: true}]"

          />
        </van-popup>
        <van-field v-model="seatNumber" label="座位号" placeholder="请输入座位号"
                   :rules="[{ pattern, message: '请输入正确座位号' }]"/>
        <van-field
            v-model="message"
            rows="2"
            label="留言"
            type="textarea"
            placeholder="请输入留言"
            :rules="[{ required: true}]"

        />
        <div style="margin: 16px;padding-bottom: 10px">
          <van-button round block type="info" native-type="submit">提交</van-button>
        </div>
      </van-form>

    </van-cell-group>
    <van-cell-group v-if="tipOffs!==null" title="举报记录">
        <van-cell @click="tipsDetailsClick(item)"  v-for="item in tipOffs" :key="item.id"  :label="item.createTime">
          <template #title >
            <span class="custom-title">{{item.position+','+item.seatNumber}}</span>
            <span>
              <van-tag v-if="item.handleStatus===0" type="warning">待处理</van-tag>
              <van-tag v-else type="success">已处理</van-tag>
            </span>
          </template>
          <template #right-icon>
            <span>
              <van-icon size="18px" name="arrow" />
            </span>
          </template>
      </van-cell>
    </van-cell-group>
    <div style="height: 50px"></div>
    <Tabbar></Tabbar>

  </div>
</template>

<script>
import {add,listByCurrentUser} from '@/api/tip-offs'
import {Dialog} from "vant";
import Tabbar from "@/components/Tabbar";
export default {
  components: {Tabbar},
  created() {
    listByCurrentUser().then(response=>{
      this.tipOffs = response.data;
    });
  },
  name: "Tips",
  data(){
    return{
      tipOffs:[{
        createTime: "",
        handleStatus: 0,
        handleTime: null,
        id: 0,
        note: "",
        position: "",
        repay: null,
        seatId: 0,
        seatNumber: "",
        userId: 0,
      }],
      pattern:/\d*-\d*/,
      seatNumber:"",
      message:"",
      showPicker:false,
      position:"",
      columns:[{
        text:"校本部图书馆",
        children:[
          {
            text:"3楼"
          },
          {
            text:"4楼"
          },
          {
            text:"5楼"
          },
          {
            text:"6楼"
          },
          {
            text:"7楼"
          },
        ]
      }]
    }
  },
  methods:{

    tipsDetailsClick(item){
      this.$router.push({
        name:'tipsDetails',params:item
      })

    },
    onPositionConfirm(value){
      this.position = value
      this.showPicker = false
    },
    onSubmit(){
      Dialog.confirm({
        title: '确认举报',
        message: '是否确认举报座位：'+this.seatNumber,
      }).then(()=>{
        let params = new URLSearchParams();
        params.append("note",this.message);
        params.append("number",this.seatNumber);
        params.append("position",this.position)
        add(params).then(response=>{
          listByCurrentUser().then(response=>{
            this.tipOffs = response.data;
          });
          if(response.code==="200"){
            listByCurrentUser();
            Dialog.alert({
              title:'举报成功',
              message: '感谢您的监督'
            })
          }
        })
      }
      )
    }
  }
}
</script>

<style scoped>

</style>
